<script setup lang="ts">
// 从全局已配置的vue导入axios
import type { Axios, AxiosResponse } from 'axios';
import {inject, Ref, ref, onMounted } from 'vue';
import { MiscCfgsRecord } from '../../ts/MiscCfgs';
import { ElMessage } from 'element-plus';

const http = inject<Axios>('http');

// app.provide('misc_cfgs', {
//     "logConsoleShowVh": 85
// })

interface ELogEntity { 
    typeStr: string;

    dateStr: string;

    timeStr: string;

    modStr: string;

    lineStr: string;

    infoStr: string;

    hasRole: boolean;

    roleStr: string;

    seqId: number;
}

let cookie = ref('PHPSESSID=47710560c3c20e44466c8d383d3b7bdf');
// 日志数据
let logDataList: Ref<Array<ELogEntity>> = ref([]);

// 日志内容占据的高度
// 默认85vh    
const logConsoleShowVh = ref(inject<MiscCfgsRecord>('misc_cfgs')?.logConsoleShowVh || 85);

// 控制台显示组件
const logConsoleShow = ref<any>(null);

const roleTag = ref("{slot_role_record}")

// 复制roleStr到粘贴板
function copyRole(roleStr: string) {
    // 或者粘贴板
    navigator.clipboard.writeText(roleStr).then(() => {
        ElMessage.success('复制role数据成功');
    }, () => {
        ElMessage.error('复制role数据失败失败');
    });
}

function splitRoleContent(infoStr: string) {
    return infoStr.split(roleTag.value, 2)
}

// 特殊日志颜色
function logColor(logType: string) {

    if (logType == 'INFO') {
        return 'green';
    } else if (logType == 'ERROR') {
        return 'red';
    } else if (logType == 'DEBUG') {
        return 'black';
    } else if (logType == 'XLL_DEBUG') {
        return 'purple';
    } else {
        return 'black';
    }

}

async function fetchLocalELog() {
    console.log("start local...");
    if (http == undefined) {
        console.log('axios is undefined');
    } else {
        const elogUrl = `/elog/console/log/local?cookie=${cookie.value}`;
        const res: AxiosResponse<Array<ELogEntity>> = await http.get(elogUrl);
        logDataList.value = res.data;
    }
}

async function fetchRemoteELog() {
    console.log("start remote...")
    if (http == undefined) {
        console.log('axios is undefined');
    } else {
        const elogUrl = `/elog/console/log?cookie=${cookie.value}`;
        const res: AxiosResponse<Array<ELogEntity>> = await http.get(elogUrl);
        logDataList.value = res.data;
    }
}

const FETCH_ELOG_TYPE = ref({
    LOCAL: 0,
    REMOTE: 1
})

async function fetchELog(fetchType: number) {
    if (fetchType == FETCH_ELOG_TYPE.value.LOCAL) {
        await fetchLocalELog();
    } else {
        await fetchRemoteELog();
    }

    // 实现滑动条滚动到底部
    setTimeout(() => {
        console.log("scroll....");
        const scroll = logConsoleShow.value as HTMLElement;
        scroll.scrollTop = scroll.scrollHeight;
    }, 300);
}
// 挂载后获取 名称为PHPSESSID的cookie 然后作为输入框默认值
onMounted(() => {
    const cookies = document.cookie.split('; ');
    const phpSessionCookie = cookies.find(cookie => cookie.startsWith('PHPSESSID='));
    cookie.value = phpSessionCookie ? phpSessionCookie : 'PHPSESSID=xxx';
})

</script>

<template>
    <div id="log-console-root" ref="logConsoleRoot">
        <div style="margin: 20px 20px 20px 0px;">
            cookie: <el-input v-model="cookie" placeholder="" style="width: 60%;"></el-input>&nbsp;&nbsp;
            <el-button @click="fetchELog(FETCH_ELOG_TYPE.LOCAL)">本地</el-button>
            <el-button @click="fetchELog(FETCH_ELOG_TYPE.REMOTE)">远端</el-button>
        </div>
        <div ref="logConsoleShow"
            :style="{ 'overflow-y': 'auto',  'height': logConsoleShowVh + 'vh', 'width': '80vw' }">
            <div v-for="(item, index) in logDataList" :key="index">
                <div class="log-item">
                    [{{ item.seqId }}]<span :style="{ 'color': logColor(item.typeStr) }">
                        [{{ item.typeStr }}][{{ item.dateStr }} {{item.timeStr }}][{{item.modStr }}:{{ item.lineStr }}]
                    </span>
                    <span v-if="item.hasRole">
                        {{ splitRoleContent(item.infoStr)[0] }}
                        <span style="color: red; background-color: blue;" @click="copyRole(item.roleStr)" title="点击复制角色role信息">{{ roleTag }}</span>
                        {{ splitRoleContent(item.infoStr)[1] }}
                    </span>  
                    <span v-else>
                        {{ item.infoStr }}
                    </span>  
                </div>
            </div>
        </div>

    </div>
</template>

<style>
.log-item {
    text-align: left;
    margin: 0;
}

.log-console-root {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

</style>